<template>
  <div class="center_collect_container">
    <div class="content" v-if="pagina.total">
      <!-- 文章展示列表 -->
      <div class="end-article-list">
        <MyArticle
          :articleData="item"
          :menu_content="menu_content"
          v-for="item in handlerPaginationNum"
          :key="item.id"
        ></MyArticle>
      </div>
      <!-- 分页器 -->
      <MyPagination :size="pagina.size" :total="pagina.total"></MyPagination>
    </div>
    <div class="empty" v-if="contentLength">😅空空如也...</div>
  </div>
</template>

<script>
import { mapState } from "vuex"; //快速发送

export default {
  name: "CenterCollect",
  computed: {
    ...mapState("tags", ["menu_content"]), //tags为组件名
    ...mapState("user", ["aimUserInfo"]),
    // 处理分页器条数
    handlerPaginationNum() {
      let arr = [];
      let { size, current } = this.pagina;
      let start = size * (current - 1);
      let end = start + size;
      for (let i = start; i < end; i++) {
        if (!this.author_article[i]) break;
        arr.push(this.author_article[i]);
      }
      return arr;
    },
  },
  data() {
    return {
      // 作者文章
      author_article: [],
      // 分页器数据
      pagina: {
        total: 0,
        size: 6,
        current: 1,
      },
      contentLength: false,
    };
  },
  watch: {
    aimUserInfo() {
      this._init_getAuthorArticle();
    },
  },
  methods: {
    // 获取作者文章
    _init_getAuthorArticle() {
      if (!this.aimUserInfo.user_id) return;
      this.$api.getUserCollect(this.aimUserInfo.user_id).then((result) => {
        this.pagina.total = result.data.length;
        if (!this.pagina.total) {
          this.contentLength = true;
        }
        this.author_article = result.data;
        // 关闭加载loading
        this.$parent.$parent.loadingResource = false;
      });
    },
    handleCurrentChange(val) {
      // 修改当前页码数
      this.pagina.current = val;
    },
  },
  mounted() {
    this._init_getAuthorArticle();
    this.$parent.active = 5;
  },
};
</script>

<style lang="less" scoped>
</style>